<template>
  <div>
      <div class="lunbotu">
        <!-- ----------------------------------------- -->
        <img :src="list[activeIndex].img" alt=""  class="bg">
        <!-- ------------------------------------ -->
       <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(iteam,index) in list" :key="index">
       <img :src="iteam.img" alt=""  >

        </div>
    </div>

    <!-- 分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  =
      </div>

  </div>
  </div>
</template>

<script>
import Swiper from '../../node_modules/swiper/swiper-bundle.js';
export default {
    name:"LunboTu",
    data() {
      return {
        activeIndex: 0,
        list:[ 
          {img: require("../assets/lunbo 1.jpg")},
          {img: require("../assets/lunbo 2.jpg")},
          {img: require("../assets/lunbo 3.jpg")},
          {img: require("../assets/lunbo 4.jpg")},
          {img: require("../assets/lunbo 5.jpg")},
          {img: require("../assets/lunbo 6.jpg")},
          {img: require("../assets/lunbo 7.jpg")},
          {img: require("../assets/lunbo 8.jpg")},
          {img: require("../assets/lunbo 9.jpg")},
          {img: require("../assets/lunbo 10.jpg")},

        ],
      }
    },
    mounted() {
        let _this = this; 
  var mySwiper = new Swiper ('.swiper-container', {     // eslint-disable-line no-unused-vars
    direction: 'horizontal', // 水平切换选项
    loop: true, // 循环模式选项
    autoplay:true,
    disableOnInteraction: false,
    //  autoplay: {
    //       delay: 3000,
    //       disableOnInteraction: false  //用户操作swiper之后，是否禁止autoplay。默认为true：停止。
    //     },
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
       clickable: true   //此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。
    },
       //slide的切换效果，默认为"slide"（位移切换），可设置为'slide'（普通切换、默认）,"fade"（淡入）"cube"（方块）"coverflow"（3d流）"flip"（3d翻转）。
        // effect: 'fade',
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    
  on: {
        //当切换时触发的方法
        slideChange: function() {
          // this.activeIndex 当前轮播图下标
          if (this.activeIndex > _this.list.length) {
            _this.activeIndex = 0;
          } else {
            _this.activeIndex = this.activeIndex - 1;
          }
        }
      }  
 



    
  })    


    },
    
}
</script>

<style>
     
        .lunbotu {
            width: 100%;
            height: 300px;
            /* background-color: rgb(169, 255, 147); */
             position: relative;
        }
        .lunbotu .bg{
         position: absolute;
         top:0;
         left:0;
         width: 100%;
         height: 300px;
         -webkit-filter:blur(30px);
         filter: blur(30px);
        }
        .swiper-container{
            width: 900px;
            height: 300px;
           overflow: hidden;
         margin: auto;
        
        }  
        .swiper-wrapper{
          width: 900px;
          height: 300px;
          margin: auto;
        
        }
     .swiper-wrapper  .swiper-slide{
          width: 900px;
          height: 300px;
          margin: auto;
     }
        /* .swiper-wrapper img{
          display:block;
           width: 900px;
            height: 300px;
        } */
      
   .swiper-container  .swiper-button-prev{
       left:251px;
     }
   .swiper-container  .swiper-button-next{
       right:251px;
     }

</style>